<template>
    <div>
        <div class="title">账号列表</div>
        <div style="display:flex;justify-content:space-between;">
            <div>
                <el-input v-model="input" style="width:250px;height:40px;margin-right:10px" placeholder="输入查询" />
                <el-select v-model="value" class="m-2" placeholder="请选择场所" size="large">
                    <el-option v-for="item in merchantType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" style="margin-left:10px" @click="inquire">查询</el-button>
                <el-button type="primary" @click="clear">清除</el-button>
            </div>
            <div>
                <el-button type="primary" style="height:40px;margin-right:10px" @click="addacct">新增账号</el-button>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%" class="table">
            <el-table-column type=index label="序号" align="center" min-width="8%" />
            <el-table-column prop="category_name" label="场所类型" align="center" min-width="12%" />
            <el-table-column prop="name" label="场所名称" align="center" min-width="16%" />
            <el-table-column prop="police.name" label="联防" align="center" min-width="12%" />
            <el-table-column prop="location" label="位置" align="center" min-width="20%" />
            <el-table-column prop="contact.phone" label="联系方式" align="center" min-width="12%" />
            <el-table-column prop="remark" label="备注" align="center" min-width="12%" />
            <el-table-column prop="amount3" label="操作" align="center" min-width="20%">
                <template #default="{ row }">
                    <el-button type="text" @click="setAcct(row)">信息</el-button>
                    <el-button type="text" @click="fn(row)">AI配置</el-button>
                    <el-button type="text" @click="edituser(row)">账号</el-button>
                    <el-button type="text" @click="details(row)">详情</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { getCity, getInquireList } from '../../api/index'
import { useAddDataStore } from '../../store/useAddDataStore'
const formStore = useAddDataStore()
const router = useRouter()
const input = ref('')
const value = ref('')
const tableData = ref([])
const inquire = async () => {
    console.log(value.value === '');
    if (value.value === '') {
        let res = await getInquireList({ keyword: input.value })
        tableData.value = res.data.data.records
    } else {
        let res = await getInquireList({ category: value.value, keyword: input.value })
        tableData.value = res.data.data.records
    }



}
const edituser = (row: any) => {
    router.push({ path: '/acctediting', query: { id: row.id, category: row.category } });
}
const setAcct = (row: any) => {
    router.push({ path: '/acctinfo', query: { id: row.id, category: row.category } });
}
const getData = async () => {
    let res = await getCity()
    tableData.value = res.data.data.records
    console.log(res);


}
const fn = (row: any) => {
    router.push({ path: '/aiconfig', query: { id: row.id, category: row.category } });
}
const clear = () => {
    input.value = ''
    value.value = ''
}
onMounted(() => {
    getData()
})
const details = (row: any) => {
    formStore.testflag = true
    router.push({ path: '/details', query: { id: row.id, category: row.category } })
}
const addacct = () => {

    router.push('/acctinfo')
}
const merchantType = [
    {
        value: 0,
        label: '派出所',
    },
    {
        value: 1,
        label: '社区',
    },
    {
        value: 3,
        label: '学校',
    },
    {
        value: 5,
        label: '酒店',
    },

    {
        value: 9,
        label: '工厂',
    },
    {
        value: 7,
        label: 'KTV',
    },
]


</script>
<style scoped lang='less'>
.title {
    height: 30px;
    line-height: 25px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

/deep/.table {
    margin-top: 10px;

    tr {
        th {
            background: #ffffff !important;
        }
    }
}
</style>